<style>
#avatar-content .card{
    margin-top:20px;
}
#avatar-content .card-block{
    overflow-x: auto;
}
#avatar-img{
    border: 1px solid #ffffff;
    height: 200px;
    width: 200px;
    border-radius: 200px;
    margin: 5% 7%;
}

#avatar-img img{
    width: 100%;
    height:100%;
    border-radius: 200px;
}
.diy-input-file{
    margin: 5% 7%;
    padding: 0;
    width: 200px;
}
.fileinput-button{
    position:relative;
    display: inline-block;
    overflow: hidden;
    width:100%;
}
.fileinput-button input{
    position:absolute;
    right:0;
    opacity: 0;
    width:100%;
}

</style>
<div id="avatar-content" class="container animated fadeIn">
    <div class="center-block col-sm-8">
             <div class="card">
                 <div class="card-header">
                   <i class="icon-user icons"></i>
                   <strong>باش سۈرەت </strong>
                     <div class="card-actions">
                         <a href="#" class="btn-close"><i class="icon-close"></i></a>
                     </div>
                 </div>
                 <div class="card-block">
                    <div id="avatar-img">
                        <img src="" onerror="this.src='img/avatars/default.jpg'">
                    </div>
                    <div class="diy-input-file">
                        <span class="btn btn-success fileinput-button">
                            <span>يەرلىكتىن تاللاش</span>
                            <input id="select-img" type="file" name="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
                        </span>
                    </div>
                 </div>
                 <div class="card-footer">
                     <button type="submit" href="#" class="btn btn-primary"><i class="fa fa-check-square-o"></i> جەزىملەش </button>
                     <button type="reset" class="btn btn-danger"><i class="fa fa-ban"></i> ۋاز كىچىش </button>
                 </div>
             </div>
    </div>
</div>


<script>

    $("#avatar-content").ready(function () {

        $("#avatar-img img").attr('src',window.localStorage.getItem('avatarLoc'));

    });


    $("input[type='file']").change(function(){
        var file = this.files[0];
        if (window.FileReader) {
            var reader = new FileReader();
            reader.readAsDataURL(file);
            //监听文件读取结束后事件
            reader.onloadend = function (e) {
                $("#avatar-img img").attr("src",e.target.result);    //e.target.result就是最后的路径地址
            };
        }
    });

    $(".card-footer button[type='submit']").click(function () {

        var formData = new FormData();
        formData.append('file', $('#select-img')[0].files[0]);
        formData.append('mId',localStorage.getItem('login_id'));

        $.ajax({
            url: 'manager/upload',
            type: 'POST',
            cache: false,
            data: formData,
            processData: false,
            contentType: false
        }).done(function(res) {
            dia.alert('ئەسكەرتىش','باش سۈرەت غەلبىلىك ئۆزگەرتىلدى!',['بىلدىم'],'fa fa-check',function (btn_name) {
                if(btn_name == 'بىلدىم'){
                    $("#avatar-content .btn-close").click();
                    window.location.reload();//刷新当前页面.
                }
            });
        }).fail(function(err) {
            dia.alert('ئەپسۇس','خاتالىق كۆرۈلدى! ',['ئالاقىلىشىمەن','ۋاز كىچىمەن'],'fa fa-times',function (btn_name) {
                if(btn_name == 'ئالاقىلىشىمەن'){ $(".sidebar .nav-item #contact").click(); }
                if(btn_name == 'ۋاز كىچىمەن'){ /* do nothing */ }
            },{'code': 1,'msg': err});
        });

    });

    $(".card-footer button[type='reset']").click(function () {
        var msg_template = 'ھازىرقى مەشغۇلاتنى ئەمەلدىن قالدۇرامسىز ؟';
       dia.alert('ئەسكەرتىش',msg_template,['ھەئە','ياق'],'',function (btn_name) {
           if(btn_name == 'ھەئە') {
               $("#avatar-content .btn-close").click();
           }
           if(btn_name == 'ياق') { /* do nothing */};
       });
    });

</script>
